<template>
  <el-config-provider :locale="locale" :message="config">
    <router-view></router-view>
  </el-config-provider>

  <operate></operate>
  <div v-show="systemStore.showLoading" class="loading-container">
    <div class="loader"></div>
  </div>
</template>


<script setup>
import { reactive } from 'vue'
import { ElConfigProvider, ElMessage } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import operate from '@/components/windowOperate/index.vue'
import { useChatStore } from './stores/chat'
import { createSession } from './api/session'
import { useSystemStore } from './stores/system'


const systemStore = useSystemStore()
const chatStore = useChatStore()

let ws = null;
(async () => {
  const module = await import('@/webSocket')
  ws = module.default // 取出默认导出
})()

const locale = zhCn

const config = reactive({
  max: 1
})

/**
 * 发送消息
 */
window.ipcRenderer.on('render-send-message', (event, data , sessionEntity) => {
  ElMessage.success({message: '联系人添加成功！' , plain: true})
  // 先创建双方服务端session再发送打招呼消息
  createSession(sessionEntity)
    .then((res) => {
      if (res.code === 200) {
        ws.sendMessage(data)
      }
    })
})

</script>


<style lang="less">

.loading-container {
  left: 0;
  top: 0;
  z-index: 999;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}
/* HTML: <div class="loader"></div> */

.loader {
  width: 100px;
  aspect-ratio: 1;
  padding: 10px;
  box-sizing: border-box;
  display: grid;
  background: #fff;
  filter: blur(5px) contrast(10) hue-rotate(300deg);
  mix-blend-mode: darken;
}
.loader:before,
.loader:after{
  content: "";
  grid-area: 1/1;
  width: 40px;
  height: 40px;
  background: #ffff00;
  animation: l7 2s infinite;
}
.loader:after{
  animation-delay: -1s;
}
@keyframes l7{
  0%   {transform: translate(   0,0)}
  25%  {transform: translate(100%,0)}
  50%  {transform: translate(100%,100%)}
  75%  {transform: translate(   0,100%)}
  100% {transform: translate(   0,0)}
}
</style>
